<template>
  <div>
    <div ref="circledata" style="background-color: rgb(235, 234, 233);height: 340px;border-radius:25px;"></div>
  </div>
</template>

<script>
export default {
    name:'circledata',
    data(){
      return {
        circleData:[
          {
            name:'香蕉',
            tol:2100,
            sales:1900
          },{
            name:'小鱼干',
            tol:2000,
            sales:1048
          },{
            name:'苹果',
            tol:2000,
            sales:630
          },{
            name:'牛奶',
            tol:2000,
            sales:485
          },{
            name:'花蛤',
            tol:2000,
            sales:475
          }
        ],
        colorArr:[
          '#F08080','#FFA500','#3CB371','#D02090','#FF6347'
        ]
          /*['#4FF778','#0BA82C'],
          ['#E5DD45','#E8B11C'],
          ['#E8821C','#E55445'],
          ['#5052EE','#AB6EE5'],
          ['#23E5E5','#2E72BF']*/
      }
    },
    methods:{
      initChart(){
        this.chartInstance = this.$echarts.init(this.$refs.circledata)
        const initOption = {
          title:{
            text:'销量与库存',
            left: 20,top: 20,
            textStyle:{
              color: '#000'
            },
          },
        }
        this.chartInstance.setOption(initOption)
        const centerArr = [
          ['22%','35%'],
          ['50%','35%'],
          ['78%','35%'],
          ['36%','75%'],
          ['65%','75%']
        ]
        const seriesArr = this.circleData.map((item, index) => {
          return {
            type: 'pie',
            radius: [75,63],
            center: centerArr[index],
            hoverAnimation: false,
            labelLine:{
              show: false
            },
            label:{
              show: true,
              position:'center',
            },
            data:[
              { 
                name: item.name +'\n'+ item.sales,
                value: item.sales,
                itemStyle: {
                  color: this.colorArr[index]
                }
              },
              {
                value: item.tol,
                itemStyle: {
                  color: '#DCDCDC'
                } 
              }
            ]
          }
        })
        const dataOption = {
          series: seriesArr,
        }
        this.chartInstance.setOption(dataOption)
      }
    },
    mounted(){
      this.initChart()
    }
}
</script>

<style>

</style>